<template>
  <div class="swiper_container">
    <el-carousel height="600px">
      <el-carousel-item v-for="(item,index) in swiper" :key="index">
        <img :src="item.swiper_source" alt="">
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
import axios from 'axios'

export default {
    data(){
        return {
            swiper:[]
        }
    },
    mounted(){
        axios.get('http://localhost:8080/data.json').then((res)=>{
            console.log(res.data.swipers)
            this.swiper = res.data.swipers
        }).catch((error)=>{
            console.log(error)
        }) 
    }
};
</script>

<style scoped>
    .swiper_container {
        width: 100%;
        height: 600px;
        background-color: orange;
    }
    .swiper_container img {
      width: 100%;
      height: 600px;
    }
</style>